<template>
	<view class="main flex flex-dir-c">
		<u-navbar title="邀请新成员"></u-navbar>
		<view class="main flex flex-dir-c">
			<view>
				<u-search class="search" placeholder="搜索群/好友" v-model="allState.searchValue"
					:show-action="false"></u-search>
			</view>
			<view class="list f1">
				<scroll-view scroll-y class="scroll">
					<view v-for="item in allState.list" :key="item.userid">
						<view class="flex flex-ai-c list-item">
							<checkbox-group @change="checkSelectItem(item.userid)">
								<label>
									<checkbox :disabled="item.disabled" :value="item.userid+''" :checked="item.checked" />
								</label>
							</checkbox-group>
							<image :src="item.handimg"></image>
							<view class="f1 list-item-info flex flex-dir-c flex-jc-c">
								<view>{{item.nickname || item.username}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view>
				<u-button @click="createCrowd">立即邀请</u-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	import chat from '@/api/chat.js'
	let allState = reactive({
		searchValue: '',
		list: [],
		userinfo: uni.getStorageSync('userinfo'),
		info: {
			id: null,
			userid: null
		}
	})
	const checkSelectItem = (e : string | number) => {
		let obj = allState.list.find(user => user.userid == e)
		if (obj.checked) {
			obj.checked = false
		} else {
			obj.checked = true
		}
	}
	//邀请成员
	const crowdAdd = async (list : AnyArray, id : Number) => {
		const res = await chat.crowdAdd({
			list: list,
			crowd_id: id
		})
		uni.navigateBack()
	}

	const createCrowd = () => {
		let list = allState.list.filter(user => {
			if(!user.disabled) {
				return user.checked
			}
		})
		
		if (!list.length) return
		crowdAdd(list, allState.info.id)
	}
	//获取所有用户列表
	const followList = async () => {
		const res = await user.getUserList({
			username: '',
			type: 4,
			crowd_id: allState.info.id
		})
		res.data.map((v : AnyObject) => {
			v.checked = v.isyq ? true : false
			v.disabled = v.isyq ? true : false
		})
		allState.list = res.data
	}
	onLoad((op) => {
		
		allState.info = {
			id: op.id,
			userid: op.userid
		}
		followList()
	})
</script>

<style lang="scss" scoped>
	@import '../../pages/news/index.scss';

	page {
		height: 100%;
	}

	.main {
		height: 100%;
	}

	.scroll {
		height: 100%;
	}
</style>